<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router'

const route = useRoute();
// 属性
defineProps<{ msg: string }>();

// 响应式状态
const count = ref<number>(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log('composition组件挂载完数字是', count.value, route)
})
</script>

<template>
  <h3>children: {{ msg || 'CompositionApi' }}</h3>
  <div>
    <button type="button" @click="increment">计数器 {{ count }}</button>
  </div>
</template>

<style scoped>
</style>
